<template>
  <div class="page">
    <el-card shadow="hover">
      <div id="foods">
        <ul id="foodsList" ref="foodsList">
          <li v-for="(list,index) in nb" :key="index" v-if="index%3==0">
            <p>Top{{(index+3)/3 + topnum}}</p>
            <p>{{list.mealTitle}}</p>
            <p>{{nb[index].menuName}}</p>
            <p>{{nb[index+1].menuName}}</p>
            <p>{{nb[index+2].menuName}}</p>
            <p>
              <router-link :to="'/index/top/mealId/' + nb[index].mealId">>>详情</router-link>
            </p>
          </li>
        </ul>
      </div>
      <ul id="pagesList">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="size"
          layout="prev, pager, next, jumper"
          :total="menu.length"
        ></el-pagination>
      </ul>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "page",
  data() {
    return {
      currentPage: 1,
      size: 24,
      mb: [],
      nb: [],
      menu: [],
      topnum: 0
    };
  },
  created() {
    //获取榜单数据
    this.$axios
      .get("http://localhost:3000/menu/top")
      .then(res => {
        //将所有数据传给menu
        this.menu = res.data.data;
        // this.length = this.menu.length / 3;
        // console.log(this.length);
        this.mb = [...this.menu];
        console.log(this.mb);
        //截取size个数据
        this.nb = this.mb.splice(0, this.size);
        this.mb = [...this.nb];
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.mb = [...this.menu];
      this.nb = this.mb.splice(0, this.size);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(this.size * val - this.size);
      console.log(this.size * val);
      console.log(this.menu);
      this.mb = [...this.menu];
      console.log(this.mb);
      this.nb = this.mb.splice(this.size * val - this.size, this.size);
      this.topnum = 8 * (val - 1);
      console.log(this.nb);
      this.mb = [...this.menu];
    }
  }
};
</script>
<style lang="css" scoped>
#foods #foodsList {
  float: left;
  width: 100%;
}

#foods #foodsList li {
  position: relative;
  float: left;
  width: 22%;
  height: 250px;
  margin-left: 30px;
  margin-top: 30px;
  cursor: pointer;
  background-color: rgba(250,250,250,0.5);
}

#foods #foodsList li p {
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  color: #666;
}

#foods #foodsList li p:first-child {
  position: relative;
  font-size: 25px;
  font-weight: bolder;
  color: #917347;
}
#foods #foodsList li p:last-child {
  display: none;
}
#foods #foodsList li:hover p:last-child {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 250px;
  background-color: rgba(90, 90, 90, 0.8);
  text-align: center;
}

#foods #foodsList li p:nth-child(2) {
  font-size: 20px;
  font-weight: bolder;
  color: #917347;
}

#foods #foodsList li p a {
  font-weight: bolder;
  color: #aaa;
}
#pagesList {
  display: inline-block;
  width: 100%;
  margin: 20px;
  text-align: center;
}
</style>
<style>
.el-pager li.active {
  color: #61b662 !important;
}
.el-pager li:hover {
  color: #61b662 !important;
}
.el-card{
  background: url('../assets/images/menubg.jpg') 100% 100% / cover no-repeat;
}
</style>